<html>

<head>
    <meta charset="utf-8">
    <title>控制台</title>
    <meta http-equiv="Content-Language" content="zh-cn">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="format-detection" content="telephone=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="author" content="CSS5, css5.com.cn">
    <link rel="stylesheet" href="./link/vital.css">
    <link rel="stylesheet" href="./link/mdui.css">
    <script src="./link/zepto.min.js"></script>

</head>

<body class="layouts layouts_index">
    <div class="row header">
        <div class="section">
            <nav class="mdui-p-l-2">
                <h2 style="line-height: 4.5rem;">CongXin IoT
                </h2>
            </nav>
        </div>
    </div>


    <div class="page bg">
        <div class="row">
            <div class="section full-width-forms">
                <div class="autogrid">
                    <div class="col-1-4 space"></div>

                    <div class="col-1-2">
                        <h3 class="center">
                            <font style="vertical-align: inherit;">
                                <font style="vertical-align: inherit;">LOGIN</font>
                            </font>
                        </h3>

                        <div class="box bg-white no-first-last">
                            <p><label><small>
                                        <font style="vertical-align: inherit;">
                                            <font style="vertical-align: inherit;">USERNAME</font>
                                        </font>
                                    </small></label><input id="username" placeholder="" type="text"></p>
                            <p><label><small>
                                        <font style="vertical-align: inherit;">
                                            <font style="vertical-align: inherit;">PASSWORD</font>
                                        </font>
                                    </small></label><input id="password" placeholder="" type="password"></p>
                            <p><a id="btn-login" href="#" class="btn red solid">
                                    <font style="vertical-align: inherit;">
                                        <font style="vertical-align: inherit;">LOGIN</font>
                                    </font>
                                </a></p>
                        </div>
                    </div>
                    <div id="msg-box" class="col-1-2 center"></div>
                </div>
            </div>
        </div>
    </div>



    <div class="row footer center">
        <div class="section">
            <hr>
            <p>by 蓝蓝 © 2021</p>
        </div>
    </div>

    <script type="text/javascript">
        var username = localStorage.getItem("username");

        $(document).ready(function () {
            $('#username').val(username);

        });

        $('#btn-login').on('click', function () {
            login($('#username').val(), $('#password').val());
            localStorage.setItem("username", "admin");
            localStorage.setItem("token", $('#password').val());
        });

        function login(_username, _password) {
            $.ajax({
                type: 'post',
                dataType: 'json',
                url: '/api/login',
                data: {
                    username: _username,
                    token: _password
                },
                success: function (data) {

                    if (data.code == 0) {
                        setTimeout(() => {
                            window.location.href = "config.html"
                        }, 100);

                        return;
                    }
                    $('#msg-box').text('登录失败');

                },
                error: function (xhr, textStatus) {
                    $('#msg-box').text('登录失败');
                    //mdui.alert('异常错误，请刷新重新');

                }
            });
        }

        function get_status() {
            $.ajax({
                method: 'get',
                dataType: 'json',
                url: '/api/status',
                success: function (data) {
                    $('#ssid').val(data.wifi.ssid);
                    $('#wifi-hostname').text("hostname:" + data.wifi.hostname);
                    $('#wifi-status').text("connect:" + data.wifi.isConnected);
                    $('#wifi-local-ip').text("local IP:" + data.wifi.localIp);
                    $('#wifi-mdns').text("mDNS:" + data.mdns.isRunning);
                    $('#heap-free').text("heap free:" + data.heap.free);

                },
                error: function (xhr, textStatus) {
                    //mdui.alert('异常错误，请刷新重新');

                }
            });
        }

    </script>

</body>

</html>